<template>
  <div class="addMonthCarBgc">
    <!-- 导航栏 -->
    <div class="addMonthCard">
      <div class="addMonthCardCenter">
        <el-page-header @back="goBack">
          <template v-slot:content>
            <!-- 在这里定义您想要显示的内容 -->
            <span>添加企业</span>
          </template>
        </el-page-header>
      </div>
      <div class="addMonthCardCenter1">黑马程序员</div>
    </div>
    <div class="vehicle">
      <!-- 车辆信息 -->
      <el-form ref="formData" label-width="100px" class="demo-ruleForm" :model="formData" :rules="rules">

        <el-card class="box-card" style="width:80vw">
          <div slot="header" class="clearfix">
            <span>企业信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="企业名称" prop="name">
              <el-input v-model="formData.name" style="width:25vw" placeholder="请输入企业名称" />
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="法人" prop="legalPerson">
                <el-input v-model="formData.legalPerson" style="width:25vw" placeholder="请输入法人" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="注册地址" prop="registeredAddress">
              <el-input v-model="formData.registeredAddress" style="width:25vw" placeholder="请输入注册地址" />
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10"> <el-form-item label="所在行业" prop="industryCode">
              <el-select
                v-model="formData.industryCode"
                placeholder="请选择所在行业"
                style="width:25vw"
                size="medium"
                class="kuan"
              >
                <el-option
                  v-for="(item,index) in selectedDate"
                  :key="index"
                  :label="item.industryName"
                  :value="item.industryCode"
                />
              </el-select>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="营业执照" prop="businessLicenseId">
              <el-upload

                ref="excel-upload-input"
                class="upload-demo"
                action=""
                :file-list="fileList"
                :before-upload="beforeUpload"
                type="file"
                :http-request="uploadImage"
              >
                <el-button v-model="formData.businessLicenseId" size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  支持扩展名：.png .jpg .jpeg,文件大小不得超过5M</div>
              </el-upload>
            </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 最近一次月卡缴费信息 -->
        <el-card class="box-card" style="width:80vw">
          <div slot="header" class="clearfix">
            <!-- 在这里自定义要插入的内容 -->
            <span>联系人</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="企业联系人" prop="contact">
                <el-input v-model="formData.contact" style="width:25vw" placeholder="请输入企业联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="联系电话" prop="contactNumber">
                <el-input v-model="formData.contactNumber" style="width:25vw" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>
    <div class="queding">
      <el-button>重置</el-button>
      <el-button type="primary" @click="quding">确定</el-button>
    </div>
  </div>
</template>
<script>
import { getParkEnterprise, getParkIndustry, postParkEnterprise, postUpload, putParkEnterprise } from '@/api/building/enterprise'

export default {
  name: 'AddMonthCard',

  data() {
    return {
      fileList: [],
      formData: {
        name: '', // 企业名称
        legalPerson: '', // 企业法人
        registeredAddress: '', // 注册地址
        industryCode: '', // 行业编号
        businessLicenseUrl: '', // 上传文件rl
        businessLicenseId: '', // 上传文件id
        contact: '', // 企业联系人
        contactNumber: '' // 企业联系方式
      },

      selectedDate: [], // 添加一个变量来存储日期选择器的值
      // 表单效验
      rules: {
        name: [{ required: true, message: '必填项，内容不能为空', trigger: 'blur' }],
        legalPerson: [{ required: true, message: '必填项，内容不能为空', trigger: 'blur' }],
        registeredAddress: [{ required: true, message: '必填项，内容不能为空', trigger: 'change' }],
        industryCode: [{ required: true, message: '必填项，内容不能为空', trigger: 'blur' }],
        businessLicenseId: [{ required: true, message: '必填项，内容不能为空', trigger: 'blur' }],
        contact: [{ required: true, message: '必填项，内容不能为空', trigger: 'blur' }],
        contactNumber: [{ required: true, message: '必填项，内容不能为空', trigger: 'change' }]

      }

    }
  },
  async created() {
    // 渲染所在行业下拉框
    const res = await getParkIndustry()
    this.selectedDate = res.data
    if (this.$route.params.id) {
      const res = await getParkEnterprise(this.$route.params.id)
      this.formData = res.data
      this.fileList = [{ name: res.data.businessLicenseName, url: res.data.businessLicenseUrl }]
    }
  },

  methods: {

    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3)
    },
    // 上传图片
    async uploadImage(e) {
      console.log(e)
      const file = e.file
      // 2 formData 对象
      const formData = new FormData()
      // 把文件包装起来
      // formData.append("键",值)
      formData.append('file', file)
      formData.append('type', '1')
      // 3 把文件发送给后端即可
      const res = await postUpload(formData)
      this.formData.businessLicenseUrl = res.data.url
      this.formData.businessLicenseId = res.data.id
      // 4 收尾
      this.$message.success('上传员工信息成功')
    },
    beforeUpload(file) {
      const list = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
      const isJPG = list.includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
    },

    // 确定按钮
    async quding() {
      // 校验表单
      this.$refs.formData.validate()
      // 发送请求
      if (this.$route.params.id) {
        delete this.formData.businessLicenseName
        delete this.formData.industryName
        delete this.formData.rent
        await putParkEnterprise(this.formData)
        // 弹出提示
        this.$message.success('编辑成功')
      } else {
        delete this.formData.id
        await postParkEnterprise(this.formData)
        // 弹出提示
        this.$message.success('添加成功')
      }
      // 清空表单
      this.$refs.formData.resetFields()
      // 跳转页面
      this.$router.push('/enterPrise')
    },
    // 跳转页面
    goBack() {
      this.$router.push('/enterPrise')
    }
  }

}

</script>
<style  scoped>
.addMonthCarBgc{
  width: 100%;
  height: 100%;
  background-color: #f4f6f8;
}
.addMonthCard{
 width: 100%;
 height: 60px;
 background-color: #fff;
 display: flex;
flex-direction:row;
justify-content:space-between;
 font-size: 18px;
}
.addMonthCardCenter{
  width: 200px;
  height: 70px;
 margin-top: 20px;
 margin-left: 20px;
}
.addMonthCardCenter1{
width: 100px;
height: 70px;
margin-top: 20px;
margin-right: 20px;
}
.vehicle{
  width: 100vw;
  /* margin-left: 140px; */
}
.box-card{
  margin-top: 30px;
   margin: 30px auto;
}
.queding{
  width: 100vw;
  height: 100px;
  background-color: #fff;
  margin-top: 50px;

    text-align: center;
    line-height: 100px;
}

</style>

